<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in list" :key="item.id">
        <div class="content df">
          <i :class="`iconfont ${item.icon} bgc${item.id}`"></i>
          <div class="box">
            <div class="title">{{ item.title }}</div>
            <div>
              <CountTo
                :start-val="0"
                :end-val="item.num"
                :duration="1400"
                class="count"
              ></CountTo>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="less" scoped>
.df {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}
.content {
  background: #fff;
  border-radius: 15px;
  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    color: gray;
    margin-bottom: 5px;
  }
  .count {
    font-weight: 700;
  }
  i {
    font-size: 50px;
    padding: 8px;
  }
  .bgc1 {
    color: #1296db;
  }
  .bgc2 {
    color: #d4237a;
  }
  .bgc3 {
    color: #1296db;
  }
  .bgc4 {
    color: #1afa29;
  }
}
</style>
